/** @jsxImportSource @emotion/react */
import * as React from "react";
import {  OriginalViewProps,  } from "../../common/base";
import {Instrument, Surface, Measurement, PartSummary} from "./elvBase";
import {createItem, EditorAreaConfig, } from "../../common/eHelper";
import {useRecordListSub} from "../../hook/useRecordListSub";
import {EditStorageContext} from "../../StorageContext";
import {Button} from "customize-easy-ui-component";

//原始记录，一一对应的报告的录入编辑数据，可打印。
//不需要每个verId新搞一个文件的，甚至不需要搞新的组件，可以只需内部逻辑处理。
//分离模式，编辑器脱离不在报告项目文本页面上面组装也就是原位置变换编辑框框或弹出模态对话框来输入的，把编辑器独立分离，点击一块区域路由器跳转独立的编辑页面，不一定一次跳转只针对单一行也能合并多行一起来编辑的。
//自定义路由器的配置拆分URL?action映射到页面组件；对应某报告模板下所有编辑修改组件；原始记录打印展示全部列表。項目標記符不能用ALL none preview printAll item1.1保留字。
const recordPrintList = [
  createItem('Instrument', <Instrument/>),
  createItem('Surface', <Surface/>),
  createItem('Measurement', <Measurement/>),
  createItem('PartSummary', <PartSummary/>),
] as EditorAreaConfig[];


//【自定义分区块或分项目编辑器的拼凑】对recordPrintList扩展的;inspectionContent检验项目数量 rowBigItem.items[]每一个items都算单独一个； subItems[],names[''] addNames['']就不算独立的了。
//forwardRef实际上已经没用了，ref，也可改成简易组件模式。
//编辑器右半边页面的组织显示，可自定义，action路由自己构造。编辑器保存通过EditStorageContext来统一做。
//注意storage,outCome的报告存储字段名称唯一性要求！【实际上】单个区单项目编辑没必要加ref=clRefs[]就能够保存数据，全部ALL显示的才用到传递和保存。
//从RecordStarter延续来这里增加态路由赋值的qs参数，recordList= React.useMemo([,qs])配合更新，才能够真正做到点击切换ProjectList?from=5后面的from参数变动可以立刻引起编辑器组件显示内容的render立刻同步变化显示。
export const OriginalView=
  React.forwardRef((
      { action: modAction,  verId, repId='', }
    :OriginalViewProps, ref
  ) => {
    const {storage, setStorage} =React.useContext(EditStorageContext) as any;
    const { _THICK_MS: SubRepIds }=storage;
    //为了避免hook报错的！React has detected a change in the order of Hooks called by ForwardRef
    if(undefined===SubRepIds)
      return <div>请先确定网络和服务器是正常的。然后才考虑是否要做：
        <Button intent='danger' onPress={() => setStorage({...storage, _THICK_MS: [] }) }>
          还没有数据！立刻初始化</Button></div>;
    return <OriginalViewInner ref={ref} action={modAction} verId={verId} repId={repId}/>
  } );

/**为了解决useProjectListAs({count: refCount } )因为变动{前面storage数据{有SONIC_TS没有THICK_MS}和后面storage{有THICK_MS}数据不一样的}，导致hook报错！
 * 只好拆分成2层次嵌套拼装的俩组件了。父组件可以逻辑return子组件可用hook，不违反hook规则不报错。
 * */
const OriginalViewInner=
  React.forwardRef((
      { action: modAction,  verId, repId='', }
          :OriginalViewProps, ref
  ) => {
    const titleRender = (store: any) => {
      return <> { `[${store?.设备编号}] `}
      </>;
    }
    const {list}=useRecordListSub(ref,repId,recordPrintList,modAction,verId,'THICK_MS',titleRender);
    return <React.Fragment>
      {list}
    </React.Fragment>;
} );

//可嵌入式的公共分项报告:还不能做简易版原始记录的打印。点跳转hook报错；直接输上originalView URL有时没效编辑区内容。LoadableComponent useProjectListAs(会从3个跳成6个)报错SubRepIds为空跳变storage={}需要屏蔽？
